<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Thread Pool 「动态线程池」</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f7f7f7;
    }
    .container {
      max-width: 100%;
      margin: auto;
      background: #fff;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    table, th, td {
      border: 1px solid #ddd;
    }
    th, td {
      padding: 10px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    .loader {
      display: none;
      text-align: center;
    }
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.5); /* 更深的背景遮罩 */
      padding-top: 100px;
    }

    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 500px;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* 添加阴影效果 */
      border-radius: 10px; /* 圆角边框 */
    }

    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    .modal input[readonly] {
      background-color: #e9e9e9;
    }

    /* 调整表单元素的样式 */
    .modal input[type="text"],
    .modal input[type="number"] {
      width: calc(100% - 10px); /* 让输入框宽度适应容器 */
      padding: 8px;
      margin-bottom: 15px; /* 增加间距 */
      border: 1px solid #ccc;
      border-radius: 4px; /* 圆角输入框 */
    }

    /* 为按钮添加样式 */
    button {
      background-color: #4CAF50; /* 绿色背景 */
      color: white;
      padding: 10px 20px;
      margin: 10px 0;
      border: none;
      border-radius: 4px; /* 圆角按钮 */
      cursor: pointer;
    }

    button:hover {
      background-color: #45a049; /* 深绿色背景 */
    }

    /* 调整标签和输入框的对齐 */
    label {
      display: block;
      margin-bottom: 5px;
      color: #333;
    }

    /* 调整标题样式 */
    .modal-content h2 {
      color: #333;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
<div class="container">
  <h1>Dynamic Thread Pool —— 动态线程池</h1>
  <div class="loader">Loading...</div>
  <button id="autoRefreshBtn">自动刷新</button>
  <button id="stopAutoRefreshBtn" style="display:none;">停止刷新</button>
  <table id="threadPoolList">
    <thead>
    <tr>
      <th>应用名称</th>
      <th>线程池名称</th>
      <th>核心线程池数</th>
      <th>最大线程数</th>
      <th>当前活跃线程数</th>
      <th>当前池中线程数</th>
      <th>队列类型</th>
      <th>当前队列任务数</th>
      <th>队列剩余容量数</th>
    </tr>
    </thead>
    <tbody>
    <!-- Data will be inserted here -->
    </tbody>
  </table>
</div>

<!-- 模态框（Modal） -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Thread Pool Configuration</h2>
    <form id="configForm">
      <label for="appName">应用名称:</label><br>
      <input type="text" id="appName" name="appName" readonly><br>
      <label for="threadPoolName">线程池名称:</label><br>
      <input type="text" id="threadPoolName" name="threadPoolName" readonly><br>
      <label for="corePoolSize">核心线程池数:</label><br>
      <input type="number" id="corePoolSize" name="corePoolSize"><br>
      <label for="maximumPoolSize">最大线程数:</label><br>
      <input type="number" id="maximumPoolSize" name="maximumPoolSize"><br>
      <button type="button" onclick="updateConfig()">确认修改</button>
    </form>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var loader = document.querySelector('.loader');
    var tbody = document.querySelector('#threadPoolList tbody');

    var autoRefreshInterval;
    var autoRefreshBtn = document.getElementById('autoRefreshBtn');
    var stopAutoRefreshBtn = document.getElementById('stopAutoRefreshBtn');

    autoRefreshBtn.addEventListener('click', function() {
      // 开始自动刷新
      if (!autoRefreshInterval) {
        autoRefreshInterval = setInterval(fetchThreadPoolList, 3000);
        autoRefreshBtn.style.display = 'none';
        stopAutoRefreshBtn.style.display = 'inline';
      }
    });

    stopAutoRefreshBtn.addEventListener('click', function() {
      // 停止自动刷新
      if (autoRefreshInterval) {
        clearInterval(autoRefreshInterval);
        autoRefreshInterval = null;
        autoRefreshBtn.style.display = 'inline';
        stopAutoRefreshBtn.style.display = 'none';
      }
    });

    function fetchThreadPoolList() {
      loader.style.display = 'block';
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://localhost:8089/api/v1/dynamic/thread/pool/query_thread_pool_list', true);
      xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
          var response = JSON.parse(xhr.responseText);
          if (response.code === "0000" && Array.isArray(response.data)) {
            var html = '';
            response.data.forEach(function(item) {
              html += '<tr>';
              html += '<td>' + item.appName + '</td>';
              html += '<td>' + item.threadPoolName + '</td>';
              html += '<td>' + item.corePoolSize + '</td>';
              html += '<td>' + item.maximumPoolSize + '</td>';
              html += '<td>' + item.activeCount + '</td>';
              html += '<td>' + item.poolSize + '</td>';
              html += '<td>' + item.queueType + '</td>';
              html += '<td>' + item.queueSize + '</td>';
              html += '<td>' + item.remainingCapacity + '</td>';
              html += '<td><button onclick="openModal(\'' + item.appName + '\', \'' + item.threadPoolName + '\')">修改</button></td>';
              html += '</tr>';
            });
            tbody.innerHTML = html;
          } else {
            console.error('The request was successful but the data format is incorrect!');
          }
        } else {
          console.error('The request failed!');
        }
        loader.style.display = 'none';
      };
      xhr.onerror = function() {
        console.error('The request failed!');
        loader.style.display = 'none';
      };
      xhr.send();
    }

    fetchThreadPoolList();
  });

  // 获取模态框元素
  var modal = document.getElementById("myModal");
  var span = document.getElementsByClassName("close")[0];

  // 点击 <span> (x), 关闭模态框
  span.onclick = function() {
    modal.style.display = "none";
  }

  // 点击模态框外的区域, 关闭模态框
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

  // 打开模态框并填充数据
  function openModal(appName, threadPoolName) {
    // 发起请求获取线程池配置
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:8089/api/v1/dynamic/thread/pool/query_thread_pool_config?appName=' + appName + '&threadPoolName=' + threadPoolName, true);
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        var response = JSON.parse(xhr.responseText);
        if (response.code === "0000" && response.data) {
          // 填充模态框表单
          document.getElementById('appName').value = response.data.appName;
          document.getElementById('threadPoolName').value = response.data.threadPoolName;
          document.getElementById('corePoolSize').value = response.data.corePoolSize;
          document.getElementById('maximumPoolSize').value = response.data.maximumPoolSize;
          // ... (填充其他只读字段) ...
          modal.style.display = "block";
        } else {
          console.error('The request was successful but the data format is incorrect!');
        }
      } else {
        console.error('The request failed!');
      }
    };
    xhr.onerror = function() {
      console.error('The request failed!');
    };
    xhr.send();
  }

  // 更新配置
  function updateConfig() {
    var appName = document.getElementById('appName').value;
    var threadPoolName = document.getElementById('threadPoolName').value;
    var corePoolSize = document.getElementById('corePoolSize').value;
    var maximumPoolSize = document.getElementById('maximumPoolSize').value;

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:8089/api/v1/dynamic/thread/pool/update_thread_pool_config', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        var response = JSON.parse(xhr.responseText);
        if (response.code === "0000") {
          alert('Configuration updated successfully!');
          modal.style.display = "none";
          fetchThreadPoolList(); // 重新加载线程池列表
        } else {
          alert('Failed to update configuration: ' + response.info);
        }
      } else {
        alert('Failed to update configuration!');
      }
    };
    xhr.onerror = function() {
      alert('Failed to update configuration!');
    };
    xhr.send(JSON.stringify({
      appName: appName,
      threadPoolName: threadPoolName,
      corePoolSize: parseInt(corePoolSize, 10),
      maximumPoolSize: parseInt(maximumPoolSize, 10)
    }));
  }

</script>
</body>
</html>
